<template>
	<div v-if="getCurrent >= 0">
		<div class="QS-Tabbar">
			<div 
			v-if="!styles.backgroundImage && styles.backgroundColor" 
			class="bgImg"
			:style="{
				backgroundColor: styles.backgroundColor || '',
				opacity: styles.backgroundImageOpacity || 1
			}"></div>
			<image 
			v-if="styles.backgroundImage" 
			class="bgImg"
			:style="{
				opacity: styles.backgroundImageOpacity || 1
			}"
			:src="styles.backgroundImage" 
			mode="widthFix"></image>
			<div class="container" :style="{ height: styles.height || '55px' }">
				<div class="tab-item" v-for="(item, index) in items" :key="index" @tap.stop="click(item, index)">
					<image class="abs-el icon" :src="getCurrent === index?item.selectIcon:item.icon" mode="widthFix" :style="{
						bottom: styles[getCurrent === index?'active':'static'].iconBottom,
						width: styles[getCurrent === index?'active':'static'].iconWidth,
						height: styles[getCurrent === index?'active':'static'].iconHeight,
					}"></image>
					<text class="abs-el name" :style="{
						bottom: styles[getCurrent === index?'active':'static'].nameBottom,
						fontSize: styles[getCurrent === index?'active':'static'].nameFontSize,
						color: styles[getCurrent === index?'active':'static'].nameColor,
					}">{{item.name}}</text>
				</div>
			</div>
			<iOS-P></iOS-P>
		</div>
		<div v-if="hasPlaceholder" :style="{ height: height + 'px', width: '100%' }"></div>
	</div>
</template>

<script>
	import iOS_P from '../QS-P-iOS-Bottom/QS-P-iOS-Bottom.vue';
	export default {
		components: { 'iOS-P':iOS_P },
		props: {
			path: {
				type: String,
				default: ''
			},
			hasPlaceholder: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			tabbarConfig() {
				return uni?.$qs?.store?.getters?.['tabbar/tabbar'];
			},
			tabbarHeight() {
				return uni?.$qs?.store?.getters?.['tabbar/height'];
			},
			getCurrent() {
				let path = this.path || `/${this.$parent.__route__}`;
				const data = this.$parent?._data?.initObj || {};
				path = uni.$qs.renderUrlData(path, data);
				const index = this.tabbarConfig?.items?.findIndex(i=>i.path == path);
				return index;
			},
			styles() {
				return this.tabbarConfig?.styles || {
						backgroundColor: '',
						backgroundImage: '',
						height: '55px',
						static: {
							iconBottom: '20px',
							nameBottom: '5px',
							iconWidth: '32px',
							iconHeight: '32px',
							nameFontSize: '12px',
							nameColor: '#333333',
						},
						active: {
							iconBottom: '20px',
							nameBottom: '5px',
							iconWidth: '32px',
							iconHeight: '32px',
							nameFontSize: '12px',
							nameColor: '#333333',
						}
					}
			},
			items() {
				return this.tabbarConfig?.items || [];
			}
		},
		watch: {
			tabbarConfig: {
				handler() {
					this.$nextTick(()=>{
						this.emitQuery();
					})
				},
				immediate: true
			}
		},
		data() {
			return {
				height: 0,
				current: 0,
			}
		},
		mounted() {
			console.log(this.$parent);
		},
		methods: {
			click(item, index) {
				if(index == this.getCurrent) return;
				if(!item?.path) return;
				const pages = getCurrentPages();
				const findInd = pages?.findIndex(i=>i?.$page?.fullPath == item.path);
				
				if(-1 == findInd) {
					uni.navigateTo({
						url: item.path
					})
				}else{
					const l = pages.length - findInd - 1;
					uni.navigateBack({
						delta: l
					})
				}
			},
			setTabbarHeight(h) {
				this.height = h;
				if(h && !this.tabbarHeight) uni.$qs.store.dispatch('tabbar/setTabbarHeight', h);
			},
			emitQuery() {
				let view = uni.createSelectorQuery().in(this);
				view.select('.QS-Tabbar').fields({
					size: true
				})
				view.exec(res => {
					console.log('获取QS-Tabbar布局信息成功: ' + JSON.stringify(res))
					const data = res?.[0] || null;
					if(data?.height) {
						this.setTabbarHeight(data.height);
						this.$emit('emitQuery', data);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.QS-Tabbar {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9999;
		width: 100%;
		
		.bgImg {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
		}
		.container {
			display: flex;
			flex-direction: row;
			white-space: nowrap;
			height: 55px;
			width: 100%;
			position: relative;
			
			
			.tab-item {
				flex: 1;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.abs-el {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					transition: all .3s;
				}

				.icon {
					width: 32px;
					height: 32px;
				}

				.name {
					font-size: 12px;
					margin-top: 4px;
				}
			}
		}

	}
</style>
